Components 路 Bootstrap 2.2.0 Documentation |
您所在的位置:网站首页 › components bootstrap › Components 路 Bootstrap 2.2.0 Documentation |
Dropdown menus
Example
Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin. Action Another action Something else here Separated link Action Another action Something else here Separated link MarkupLooking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu. Action Another action Something else here Separated link OptionsAlign menus to the right and add include additional levels of dropdowns. Aligning the menusAdd .pull-right to a .dropdown-menu to right align the dropdown menu. ... Sub menus on dropdownsAdd an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling. Default Action Another action Something else here More options Second level link Second level link Second level link Second level link Second level linkDropup Action Another action Something else here More options Second level link Second level link Second level link Second level link Second level linkLeft submenu Action Another action Something else here More options Second level link Second level link Second level link Second level link Second level link ... More options ... Button groups ExamplesTwo basic options, along with two more specific variations. Single button groupWrap a series of buttons with .btn in .btn-group. 1 2 3 Multiple button groupsCombine sets of into a for more complex components. ... Vertical button groupsMake a set of buttons appear vertically stacked rather than horizontally. ... Checkbox and radio flavorsButton groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the JavaScript docs for that. Dropdowns in button groupsHeads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering. Button dropdown menus Overview and examplesUse any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup. Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Works with all button sizesButton dropdowns work at any size: .btn-large, .btn-small, or .btn-mini. Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Requires JavaScriptButton dropdowns require the Bootstrap dropdown plugin to function. In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom JavaScript. Split button dropdownsBuilding on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links. Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action SizesUtilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing. Action Another action Something else here Separated link Action Another action Something else here Separated link Action Another action Something else here Separated link Action Dropup menusDropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down. Action Another action Something else here Separated link Action Another action Something else here Separated link Dropup Nav: tabs, pills, and lists Lightweight defaults Same markup, different classesAll nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class. Basic tabsTake a regular of links and add .nav-tabs: Home Profile Messages Home ... ... Basic pillsTake that same HTML, but use .nav-pills instead: Home Profile Messages Home ... ... Disabled stateFor any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless you remove the href attribute. Alternatively, you could implement custom JavaScript to prevent those clicks. Clickable link Clickable link Disabled link ... Home ... Component alignmentTo align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction. StackableAs tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked. Stacked tabs Home Profile Messages ... Stacked pills Home Profile Messages ... DropdownsAdd dropdown menus with a little extra HTML and the dropdowns JavaScript plugin. Tabs with dropdowns Home Help Dropdown Action Another action Something else here Separated link Dropdown Pills with dropdowns Home Help Dropdown Action Another action Something else here Separated link Dropdown Nav listsA simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X. Example nav listTake a list of links and add class="nav nav-list": List header Home Library Applications Another list header Profile Settings Help List header Home Library ...Note For nesting within a nav list, include class="nav nav-list" on any nested . Horizontal dividersAdd a horizontal divider by creating an empty list item with the class .divider, like so: ... ... Tabbable navBring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left. Tabbable exampleTo make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content. Section 1 Section 2 Section 3I'm in Section 1. Howdy, I'm in Section 2. What up girl, this is Section 3. Section 1 Section 2I'm in Section 1. Howdy, I'm in Section 2. Fade in tabsTo make tabs fade in, add .fade to each .tab-pane. Requires jQuery pluginAll tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the JavaScript docs page. Tabbable in any direction Tabs on the bottomFlip the order of the HTML and add a class to put tabs on the bottom. I'm in Section A. Howdy, I'm in Section B. What up girl, this is Section C. Section 1 Section 2 Section 3 ... ... Tabs on the leftSwap the class to put tabs on the left. Section 1 Section 2 Section 3I'm in Section A. Howdy, I'm in Section B. What up girl, this is Section C. ... ... Tabs on the rightSwap the class to put tabs on the right. Section 1 Section 2 Section 3I'm in Section A. Howdy, I'm in Section B. What up girl, this is Section C. ... ... Navbar Basic navbarTo start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content. Title Home Link Link Title Home Link Link Navbar components BrandA simple link to show your brand or project name only requires an anchor tag. Title Project name Nav linksNav items are simple to add via unordered lists. Home Link Link Home Link LinkYou can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links: Home Link Link ... ... FormsTo properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it. Submit Search formFor a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar. Component alignmentAlign nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction. Using dropdownsAdd dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin. Account ...Visit the JavaScript dropdowns documentation for more markup and information on calling dropdowns. TextWrap strings of text in an element with .navbar-text, usually on a tag for proper leading and color. Optional display variationsFix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar. Fixed to topAdd .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS. Title Home Link Link ... Fixed to bottomAdd .navbar-fixed-bottom instead. Title Home Link Link ... Static top navbarCreate a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body. Title Home Link Link ... Responsive navbarTo implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar. Title Home Link Link Dropdown Action Another action Something else here Nav header Separated link One more separated link Link Dropdown Action Another action Something else here Separated link Project name Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file. Inverted variationModify the look of the navbar by adding .navbar-inverse. Title Home Link Link Dropdown Action Another action Something else here Nav header Separated link One more separated link Link Dropdown Action Another action Something else here Separated link ... Breadcrumbs ExamplesA single example shown as it might be displayed across multiple pages. Home Home / Library Home / Library / Data Home / Library / Data Pagination Two options for paging through content Standard paginationSimple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas. « 1 2 3 4 5 » Prev 1 2 3 4 Next Options Disabled and active statesLinks are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page. « 1 2 3 4 5 » Prev 1 ...You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles. Prev 1 ... SizesFancy larger or smaller pagination? Add .pagination-large, .pagination-small, or .pagination-mini for additional sizes. « 1 2 3 4 5 » « 1 2 3 4 5 » « 1 2 3 4 5 » « 1 2 3 4 5 » ... ... ... ... AlignmentAdd one of two optional classes to change the alignment of pagination links: .pagination-centered and .pagination-right. « 1 2 3 4 5 » ... « 1 2 3 4 5 » ... PagerQuick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines. Default exampleBy default, the pager centers links. Previous Next Previous Next Aligned linksAlternatively, you can align each link to the sides: ← Older Newer → ← Older Newer → Optional disabled statePager links also use the general .disabled utility class from the pagination. ← Older Newer → ← Older ... Labels and badges Labels Labels Markup Default Default Success Success Warning Warning Important Important Info Info Inverse Inverse Badges Name Example Markup Default 1 1 Success 2 2 Warning 4 4 Important 6 6 Info 8 8 Inverse 10 10 Typographic components Hero unitA lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites. Hello, world!This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. Learn more HeadingTagline Learn more Page headerA simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1's default small, element as well most other components (with additional styles). Example page header Subtext for header Example page header Subtext for header Thumbnails Grids of images, videos, text, and more Default thumbnailsBy default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup. With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Action Action Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Action Action Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Action Action Why use thumbnailsThumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content. Simple, flexible markupThumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents. Uses grid column sizesLastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions. MarkupAs mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images: For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the for a like so: Thumbnail caption... ... More examplesExplore all your options with the various grid classes available to you. You can also mix and match different sizes. Wrap any text and an optional dismiss button in .alert for a basic warning alert message. Warning! Best check yo self, you're not looking too good. × Warning! Best check yo self, you're not looking too good. Dismiss buttonsMobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an tag. ×Alternatively, you may use a element with the data attribute, which we have opted to do for our docs. When using , you must include type="button" or your forms may not submit. × Dismiss alerts via JavaScriptUse the alerts jQuery plugin for quick and easy dismissal of alerts. OptionsFor longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block. Warning!Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. × Warning! Best check yo self, you're not... Contextual alternativesAdd optional classes to change an alert's connotation. Error or danger Oh snap! Change a few things up and try submitting again. ... Success Well done! You successfully read this important alert message. ... Information Heads up! This alert needs your attention, but it's not super important. ... Progress bars For loading, redirecting, or action status Examples and markup BasicDefault progress bar with a vertical gradient. StripedUses a gradient to create a striped effect. Not available in IE7-8. AnimatedAdd .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE. StackedPlace multiple bars into the same .progress to stack them. Options Additional colorsProgress bars use some of the same button and alert classes for consistent styles. Striped barsSimilar to the solid colors, we have varied striped progress bars. Browser supportProgress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox. Versions earlier than Internet Explorer 10 and Opera 12 do not support animations. Media objectAbstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left- or right-aligned image alongside textual content. Default exampleThe default media allow to float a media object (images, video, audio) to the left or right of a content block. With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists). Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Use the well as a simple effect on an element to give it an inset effect. Look, I'm in a well! ... Optional classesControl padding and rounded corners with two optional modifier classes. Look, I'm in a well! ... Look, I'm in a well! ... Close iconUse the generic close icon for dismissing content like modals and alerts. ×iOS devices require an href="#" for click events if you would rather use an anchor. × Helper classesSimple, focused classes for small display or behavior tweaks. .pull-leftFloat an element left class="pull-left" .pull-left { float: left; } .pull-rightFloat an element right class="pull-right" .pull-right { float: right; } .mutedChange an element's color to #999 class="muted" .muted { color: #999; } .clearfixClear the float on any element class="clearfix" .clearfix { *zoom: 1; &:before, &:after { display: table; content: ""; } &:after { clear: both; } } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |